﻿@model UserLoginSharedDto
@Html.Extra()
@{
    CookieHelper.Set("LoginOrigin", "Admin");
}

@using (Html.BeginForm())
{
    <input type="hidden" name="Application" value="Common" />
    <input type="hidden" name="Application" value="Admin" />
    <input type="hidden" name="Application" value="WX" />
    <div class="field">
        @Html.LabelFor(model => model.UserName, "用户名或手机号")
        @Html.MyNet().TextBoxFor(model => model.UserName, new ValidateOptions
        {
            RequiredError = "请输用户名或手机号",
            LengthMax = 64
        }, new { autocomplete = "off" })
    </div>

    <div class="smg-wrap">
        <div class="field">
            @Html.LabelFor(model => model.UserName, "密码或验证码")
            @Html.MyNet().PasswordFor(model => model.Password, new ValidateOptions
            {
                RequiredError = "请输入密码或验证码",
                LengthMax = 64
            }, new { autocomplete = "off" })
        </div>

        <div class="sms-btn">
            <div id="sms-btn">获取验证码</div>
        </div>
    </div>

    <div class="button">
        <label>
            @Html.MyNet().CheckBoxFor(model => model.IsRemember) 记住登录
        </label>
        <button type="submit">
            登录
        </button>
    </div>
}
<script>


    $(function () {


        function getVendorPrefix() {
            const body = document.body || document.documentElement
            const style = body.style
            const vendor = ['webkit', 'khtml', 'moz', 'ms', 'o']
            let i = 0
            while (i < vendor.length) {
                // 此处进行判断是否有对应的内核前缀
                if (typeof style[vendor[i] + 'Transition'] === 'string') {
                    return vendor[i]
                }
                i++
            }
        }

        console.log('getVendorPrefix()', getVendorPrefix());

        if (getVendorPrefix() !== 'webkit') {
            window.location.href = 'https://www.google.cn/chrome/'
            alert('检测到您的浏览器无法正常访问系统，请将浏览器切换到 极速内核/极速模式！(点击地址栏最右侧的浏览器图标切换)，强烈建议使用 谷歌Chrome浏览器 （已为您转至快速下载地址）！')
        }

        function countDown(num, func) {
            if (num >= 0) {
                func(num)
                setTimeout(function () {
                    countDown(num -= 1, func)
                }, 1000)
            } else {
                func('获取验证码')
            }
        }

        $("#sms-btn").on('click', function (e) {
            var phone = $('#UserName').val();
            if (!phone) { return alert('请输入正确的手机号'); }
            if (phone.length != 11 && !phone.startsWith("1")) { return alert('请输入正确的手机号'); }

            if ($(this).html() !== '获取验证码') {
                return
            }

            var that = this
            $(that).html("60S后获取")
            $(that).addClass("disabled");

            countDown(60, function (num) {
                $(that).html(Object.prototype.toString.call(num) === "[object Number]" ? num + "S后获取" : num)
                if (Object.prototype.toString.call(num) !== "[object Number]") {
                    $(that).removeClass("disabled");
                }
            })

            $.ajax({
                url: "/oa/getCode",
                data: { mobilePhone: phone },
                success: function (result) {
                    if (disposeException(result)) return;
                }
            })
        });



        $("#UserName").bind("keyup blur change", function (e) {
            if ($(this).val() == "") {
                $(this).prev().html("请输用户名或手机号");
            }
            else {
                $(this).prev().html("");
            }
        });

        $("#UserName").prev().click(function (e) {
            $("#UserName").focus();
        });

        $("#Password").bind("keyup blur change", function (e) {
            if ($(this).val() == "") {
                $(this).prev().html("请输入密码或验证码");
            }
            else {
                $(this).prev().html("");
            }
        });

        $("#Password").prev().click(function (e) {
            $("#Password").focus();
        });

        $("#UserName").trigger("change");
        $("#Password").trigger("change");

    });
</script>

<style>
    .smg-wrap { position: relative; }

    .sms-btn { position: absolute; right: 0; top: 0; right: 20px; z-index: 1000; }

    .sms-btn #sms-btn { height: 40px; line-height: 40px; padding: 0 20px; font-size: 13px; color: #FFF; border: none; background: #6AA2E0; border-radius: 3px; }

    .sms-btn #sms-btn.disabled { color: rgba(0,0,0,.25); background-color: #f5f5f5; border-color: #d9d9d9; }
</style>
